<template>
  <view class="w-full">
    <div class="box1">
      <div class="box_imgs">
        <img class="img1" src="/static/requirements_imgs/1.png" alt="" />
        <img class="img1" src="/static/requirements_imgs/2.png" alt="" />
        <img class="img1" src="/static/requirements_imgs/3.png" alt="" />
      </div>
    </div>
    <div class="box p-2 rounded-md m-3 gap-2">
      <!-- <div class="m-3 gap-2 flex font-bold">订单编号: {{ order.rid }}</div> -->
      <div class="m-2 gap-2 flex">
        <p class="font-bold w-24">订单编号</p>
        <p class="truncate">: {{ order._id }}</p>
      </div>
    </div>


    <requirements_card v-bind="order" />
    <div class="box rounded-md m-3 gap-2 flex-col flex">
      <div class="m-3 gap-2 flex">
        <p class="font-bold">需求描述</p>
      </div>
      <div class="m-3 gap-2 flex" style="font-size:small">
        {{ order.requirements }}
      </div>
    </div>
    <div class="box rounded-md m-3 flex-col flex">
      <div class="m-3 flex">
        <p class="font-bold">联系电话:</p>
        <p class="p1">{{ order.phone }}</p>
      </div>
      <div class="m-3 flex">
        <span class="span1 font-bold">维护地址:</span>
        <p class="p1">{{ order.area }}</p>
      </div>
    </div>
    <div class="h-20">

    </div>
    <div class="flex justify-between items-center fixed bottom-0 w-full bg-white">
      <div class="button1 rounded-md z-10 p-4 ml-20" @touchend="handleApply">
        接单
      </div>
      <ButtonStar :_id="order._id" class="mr-20" />
    </div>

  </view>
</template>

<script setup>
import requirements_card from '../../components/requirements_card.vue';
import dayjs from 'dayjs';
import { ref, computed } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { useDocumentsStore } from '../../stores/documents';
import ButtonStar from '../../components/ButtonStar.vue';

const order = ref(
  {

    _id: 183849749, //订单编号，系统自动生成
    uid: 4618683478, // 用户编号
    status: '',
    preparations: "网线10米、插线板3个", // 物料
    title: "停车系统安装", // 需求
    requirements: "小区需要雇佣员工安装新的停车系统",
    headCount: 3, // 人员数
    workTime: 2, //工期
    startTime: Date.now(), //开工时间
    price: 20, //工钱
    preparationsPrice: 1200,  //物料费
    orderPhone: 13783297239, // 订单电话
    contactPhone: 15678278323, // 现场联系电话,
    location: "重庆市渝北区水星B区物业中心" // 开工地址 
  })
const documents = useDocumentsStore()

onLoad((option) => {
  order.value = documents.orders.find(v => v._id === option.id)
})

function handleApply() {
  uni.request(
    {
      url: '/apply/' + order.value._id,
      method: 'POST',
      success: ({ data, statusCode }) => {
        if (statusCode === 400)
          uni.showToast({ title: data.message, icon: 'error' })
        else {
          uni.navigateTo({ url: '/pages/acceptsuccess/acceptsuccess' })
        }
      },

    }
  )
}
</script>


<style>
.box {
  border: 2px solid rgba(31, 31, 31);
}

.button1 {
  color: black;
  background-color: #D8DBDB;

}

.button2 {
  color: black;
  background-color: aqua;
}

.box1 {
  width: 320px;
  height: 240px;
  margin: 0 auto;
  overflow: hidden;
}

.img1 {
  float: left;
  height: 240px;
  width: 320px;
}

.box_imgs {
  width: calc(3 * 320px);
  height: 240px;
  animation: move 20s ease 1s infinite;
}

@keyframes move {
  0% {
    transform: translateX(calc(0 * 320px));
  }

  50% {
    transform: translateX(calc(-1 * 320px));
  }

  100% {
    transform: translateX(calc(-2 * 320px));
  }

}

.p1 {

  display: inline-block;

  text-align: left;

}

.span1 {
  word-break: keep-all;
  white-space: nowrap;
}
</style>
